<template>
  <div class="pie-container" ref="mileage"></div>
</template>
<script>
import * as echarts from "echarts";
import { EleResize } from "@/utils/resize/index.js";
let mileageEcharts = null;
let flag = false;
export default {
  props: {
    pieData: {
      type: Array,
      required: true,
    },
    unit: {
      type: String,
    },
  },
  data() {
    return {
      mileageEcharts: "", //行驶里程分布echarts
      newPieData: [],
      option: "",
      startCharts: null,
    };
  },
  watch: {
    pieData: {
      handler(newData, oldData) {
        this.newPieData = newData;
        if (this.newPieData && this.newPieData.length > 0) {
          this.$nextTick(() => {
            this.pie();
          });
        }
      },
      immediate: true,
      deep: true, // 如果是对象要深度监听
    },
  },
  methods: {
    pie() {
      this.$nextTick(() => {
        let _this = this;
        let index = 0;
        let isSet = false;

        mileageEcharts = echarts.init(this.$refs.mileage);
        mileageEcharts.dispose();
        mileageEcharts = echarts.init(this.$refs.mileage);
        mileageEcharts.clear();
        mileageEcharts.resize();

        const pieData1 = [];
        for (let i = 0; i < this.newPieData.length; i++) {
          pieData1.push({
            ...this.newPieData[i],
            itemStyle: {
              borderWidth: 2,
              normal: {
                shadowBlur: 200,
              },
            },
          });
        }

        let option = {
          title: {
            top: "3%",
            left: "10%",
          },
          color: ["#4287F5", "#57DB8F", "#F4F2C6"],
          tooltip: {
            show: true,
            formatter: "{b}:{c} ({d}%)",
            textStyle: {
              fontSize: 12,
            },
          },
          legend: {
            top: "bottom",
            icon: "circle",
            type: "scroll",
            textStyle: {
              color: "#fff",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "0%",
            containLabel: true,
          },
          series: [
            {
              name: " ",
              type: "pie",
              radius: ["45%", "65%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: "12",
                    fontWeight: "bold",
                  },
                },
              },

              data: pieData1,
            },
          ],
        };

        // 改变屏幕大小图表重新加载
        let resizeDiv = this.$refs.mileage; // 这个是渲染echarts的div
        let listener = () => {
          mileageEcharts.resize();
        };
        EleResize.on(resizeDiv, listener);
        this.option = option;
        option && mileageEcharts.setOption(option, true);

        // 鼠标事件
        let pieChart = mileageEcharts;
        //鼠标移出之后，恢复自动高亮
        pieChart.on("mouseout", function (param) {
          if (!isSet) {
            clearInterval(_this.startCharts);
            _this.startCharts = setInterval(chartHover, 2000);
            flag = true;
          }
        });

        //自动高亮显示
        var chartHover = function () {
          var dataLen = option.series[0].data.length;
          // 取消之前高亮的图形
          pieChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
          index = (index + 1) % dataLen;
          // 高亮当前图形
          pieChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: index,
          });
          pieChart.setOption(option, true);
          // 显示 tooltip
          pieChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index,
          });
        };
        if (!_this.startCharts) {
          _this.startCharts = setInterval(chartHover, 3000);
        } else {
          clearInterval(_this.startCharts);
          _this.startCharts = setInterval(chartHover, 3000);
        }

        // 鼠标移动上去的时候的高亮动画
        pieChart.on("mouseover", function (param) {
          flag = false;
          isSet = false;
          clearInterval(_this.startCharts);
          //取消之前高亮图形
          pieChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
          index = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
          //高亮当前图形
          pieChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
          //显示tooltip
          pieChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
          pieChart.setOption(option, true);
        });
        // 先执行一遍自适应窗口
        mileageEcharts.resize();
      });
    },
  },
  beforeDestroy() {
    if (mileageEcharts) {
      mileageEcharts.dispose();
      mileageEcharts = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.pie-container {
  width: 100%;
  height: 100%;
}
</style>
